<!--
 * @Description: 组件
 * @Author: zzj
 * @Date: 2021-10-11 10:06:20
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-11 16:26:43
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>组件</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
</head>
<body>
	<div id="app">
		<!--当props不声明类型时， 静态传参 不加":",默认类型为string -->
		<briup-list data="hello"></briup-list>
		<briup-list data="2"></briup-list>
		<briup-list data="true"></briup-list>
		<briup-list data></briup-list>

		<div>---------</div>

		<!-- 动态传参 加":" ,将后边的值解析-->
		<briup-list :data="hello"></briup-list>
		<briup-list :data="'hello world'"></briup-list>
		<briup-list :data="2"></briup-list>
		<briup-list :data="true"></briup-list>
		<briup-list :data="[1,2,3]"></briup-list>
		<briup-list :data="{name:'terry'}"></briup-list>
	</div>

	<script>
		//1.定义组件
		let briupList = {
			template:`
				<div>
					{{typeof data}} : {{data}}
				</div>
			`,
			props:{
				data:Boolean
			},
			data(){
				return{
					name:"列表",
				}
			}
		}
		//2.注册组件   一定在初始化之前
		Vue.component("briup-list", briupList)
		//3.使用组件


		new Vue({
			el:"#app",
			data:{
				hello:"hello 组件"
			}
		})
	</script>
</body>
</html>